<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCourseStore } from '@/stores/courses'
import AppNavigation from '@/components/AppNavigation.vue'

const route = useRoute()
const router = useRouter()
const courseStore = useCourseStore()
const course = ref(null)

onMounted(() => {
  const courseId = route.params.id
  course.value = courseStore.getCourseById(courseId)
  if (!course.value) {
    router.push('/')
  }
})
</script>

<template>
  <div class="course-detail" v-if="course">
    <van-nav-bar
      title="课程详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    
    <div class="content">
      <div class="course-header">
        <van-image :src="course.image" width="100%" height="200" />
        <h1 class="course-title">{{ course.title }}</h1>
        <p class="course-desc">{{ course.description }}</p>
      </div>
      
      <div class="video-list">
        <h2 class="section-title">课程视频</h2>
        <van-cell-group inset>
          <van-cell 
            v-for="(video, index) in course.videos" 
            :key="index"
            :title="video.title"
            is-link
            @click="window.open(video.url, '_blank')"
          />
        </van-cell-group>
      </div>
    </div>
    
    <AppNavigation />
  </div>
</template>

<style scoped>
.course-detail {
  padding-top: 46px;
  padding-bottom: 50px;
}

.content {
  padding: 16px;
}

.course-header {
  background-color: #fff;
  border-radius: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.course-title {
  font-size: 20px;
  font-weight: bold;
  margin: 16px;
  color: #323233;
}

.course-desc {
  font-size: 14px;
  color: #646566;
  margin: 0 16px;
  line-height: 1.5;
}

.section-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  color: #323233;
}
</style> 